import classNames from 'classnames'
import './dayBill.scss'
import { useMemo, useState} from 'react'
import { billTypeToName } from '@/containts'
import Icon from '@/components/icon'
import {SwipeAction} from 'antd-mobile'
import {delBillList} from '@/store/modules/billStore'
import {useDispatch} from 'react-redux'
import {useNavigate} from 'react-router-dom'

const DailyBill = ({ dayKey, dayBillList }) => {
  const dispatch = useDispatch()
  const navigate = useNavigate()

  // 计算统计
  const dayResult = useMemo(() => {
    if (dayBillList) {
      //收入
      const income = dayBillList.filter(item => item.type === 'income')
        .reduce((a, c) => a + c.money, 0)
      //支出
      const pay = dayBillList.filter(item => item.type === 'pay')
        .reduce((a, c) => a + c.money, 0)
      return { income, pay, total: income + pay }
    } else {
      return { income: 0, pay: 0, total: 0 }
    }
  }, [dayBillList])

  const [visiable, setVisiable] = useState(false)

  const onDelete = (itemId)=>{
    dispatch(delBillList(itemId))
  }
 const onUpdate = (itemId)=>{
    navigate(`/new?id=${itemId}`)
  }

  return (
    <div className={classNames('dailyBill')}>
      <div className="header">
        <div className="dateIcon" onClick={() => setVisiable(!visiable)}>
          <span className="date">{dayKey}</span>
          <span className={classNames('arrow', { 'expand': visiable })}
          ></span>
        </div>
        <div className="oneLineOverview">
          <div className="pay">
            <span className="type">支出</span>
            <span className="money">{dayResult.pay.toFixed(2)}</span>
          </div>
          <div className="income">
            <span className="type">收入</span>
            <span className="money">{dayResult.income.toFixed(2)}</span>
          </div>
          <div className="balance">
            <span className="money">{dayResult.total.toFixed(2)}</span>
            <span className="type">结余</span>
          </div>
        </div>
      </div>

      {/* 日账单的每条账单明细 */}
      <div className="billList" style={{ display: visiable ? 'block' : 'none' }}>
        {dayBillList.map(item => {
          return (
            <SwipeAction
              key={item.id}
              rightActions={[
              {
                  key: 'update',
                  text: '更新',
                  color: 'primary',
                  onClick:()=>onUpdate(item.id)
                },
                {
                  key: 'delete',
                  text: '删除',
                  color: 'danger',
                  onClick:()=>onDelete(item.id)
                },
              ]}
            >
              <div className="bill">
                <Icon type={item.useFor} />
                <div className="detail">
                  <div className="billType">{billTypeToName[item.useFor]}</div>
                </div>
                <div className={classNames('money', item.type)}>
                  {item.money.toFixed(2)}
                </div>
              </div>
            </SwipeAction>
          )
        })}
      </div>
    </div>
  )
}
export default DailyBill